<template>
  <div>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(1.使用v-on或者@) -->
    <Student v-on:atguigu="getStudentName" @demo="m"  />
    
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(2.使用ref) -->
    <!-- <Student ref="student"  /> -->
    <h1 class="ads">{{msg}}，学生的姓名是：{{studentName}}</h1>
  </div>
</template>

<script>
import Student from './components/Student.vue'
import School from './components/School.vue'
export default {
  name:'App',
  components:{
    Student,
    School
    },
    data(){
      return {
        msg:'123',
        studentName:''
      }
    },
    methods:{
      getSchoolName(name){
        console.log('学校名：'+name)
      },
      getStudentName(name){
        console.log('学生名：'+name)
        this.studentName = name
      },
      m(){
        console.log('demo事件被触发了')
      }
    },
    mounted(){
      // setTimeout(() => {
      //   this.$refs.student.$on('atguigu',this.getStudentName)
      // }, 3000);
    }
}
</script>

<style>
  .app{
    background-color: blue;
  }
  .ads{
        background-color: yellow;
    }
</style>